Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Radio Button Sizes
We can set radio button sizes with the size prop.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-radio
size="xs"
v-model="color"
val="green"
label="green"
color="green"
></q-radio>
<q-radio
size="sm"
v-model="color"
val="red"
label="red"
color="red"
></q-radio>
<q-radio
size="md"
v-model="color"
val="blue"
label="blue"
color="blue"
></q-radio>
</div>
<div class="q-px-sm">
<strong>{{ color }}</strong>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
color: ""
}
});
</script>
</body>
</html>
to set the sizes. Other possible values include lg and xl .
We can show radio buttons with the q-option-group component:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-option-group
:options="options"
label="Notifications"
type="radio"
v-model="group"
>
</q-option-group>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
group: null,
options: [
{ label: "Battery too low", value: "bat" },
{ label: "Friend request", value: "friend", color: "green" },
{ label: "Uploaded", value: "upload", color: "red" }
]
}
});
</script>
</body>
</html>
We set the options prop to set the options for the radio button.
Checkbox
We can add checkboxes into our Vue app with Quasar’s q-checkbox component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-checkbox v-model="right" label="Label on Right"></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
v-model="left"
label="Label on Left"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
to add it.
We bind the checked value with the v-model directive.
The label prop has the label to display with the checkbox.
left-label puts the label to the left of the checkbox.
We can change the checkbox color with the color prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-checkbox
v-model="right"
color="green"
label="Label on Right"
></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
keep-color
v-model="left"
label="Label on Left"
color="orange"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
color sets the color of the checkbox.
keep-color sets the outline color to the color value of the color prop even when it’s unchecked.
Conclusion
We can add checkboxes and radio buttons into our Vue app with the Quasar library.
